<template>
	<view>
		<template v-if="BenYe_ShuJu_ZhuangTai == 'You_ShuJu'">
			<view class="YR-UI-LieBiao-9">
				<view
					@click="$_TiaoZhuan('_XiangQing_TieZi/_XiangQing_TieZi?pid=' + item.pid)"
					v-for="item in BenYe_LieBiao"
					class="XunHuan">
					<view class="Zuo">
						<view>{{item.commentCount}}</view>
						<view>评论</view>
					</view>
					<view class="Zhong">
						<view>{{item.followCount}}</view>
						<view>收藏</view>
					</view>
					<view class="You">
						<view class="BiaoTi">
							{{item.title?item.title:$_GuoLv_HTML(item.content)}}
						</view>
						<view class="XinXi">
							<view class="YongHu">
								<view>
									<image :src="item.creator.avatar" mode="widthFix"></image>
								</view>
								<text>{{item.creator.nickname}}</text>
							</view>
							<view class="ShiJian">{{item.createTimeFormat}}</view>
							<view class="LanMu" v-if="item.group"># {{item.group.gname}}</view>
						</view>
					</view>
				</view>
				<view
					v-if="BenYe_ShuJu_ZhuangTai_JiaZaiGengDuo"
					style="margin-top: 25rpx;"
					class="YR-UI-YiHangZi-1"
					@click="DianJi_JiaZai_GengDuo"><text>点击加载更多</text></view>
			</view>
		</template>
		<template v-if="BenYe_ShuJu_ZhuangTai == 'JiaZaiZhong'">
			<YouRan-UI-JiaZaiZhong LeiXing="JuBu"></YouRan-UI-JiaZaiZhong>
		</template>
		<template v-if="BenYe_ShuJu_ZhuangTai == 'Wu_ShuJu'">
			<view class="YouRan-UI-WuShuJu-1 Flex" style="padding: 50rpx 0;">
				<text class="iconfont icon-cry Zt-ZhanWeiSe"></text>
				<view class="Zt-ZhanWeiSe">暂无任何数据</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		name:"YouRan-UI-ShouCang-LieBiao",
		data() {
			return {
				BenYe_LieBiao:[],
				BenYe_ShuJu_ZhuangTai:"JiaZaiZhong",
				BenYe_ShuJu_ZhuangTai_JiaZaiGengDuo:false,
				BenYe_ChuShiHua_YeMa:2
			};
		},
		mounted() {
			this.QingQiu()
		},
		methods: {
			QingQiu(){
				uni.request({
					url:this.$_URL() + `/api/v2/user/${uni.getStorageSync('YongHuXinXi').data.detail.username}/mark/follow/posts`,
					method:'GET',
					header:this.$_Fresns_Header(),
					data:{
						"pageSize":2
					},
					success: (res) => {
						if(res.data.code == 0){
							this.BenYe_LieBiao = res.data.data.list;
							if(this.BenYe_LieBiao.length){
								this.BenYe_ShuJu_ZhuangTai = 'You_ShuJu';
							}else{
								this.BenYe_ShuJu_ZhuangTai = 'Wu_ShuJu';
							}
							if(res.data.data.paginate.total > res.data.data.paginate.pageSize){
								this.BenYe_ShuJu_ZhuangTai_JiaZaiGengDuo = true
							}
						}else{
							uni.showToast({
								title:res.data.message,
								icon:"none",
								duration:1000
							});
						}
					}
				})
			},
			DianJi_JiaZai_GengDuo(){
				uni.showLoading({ title: "加载中" });
				uni.request({
					url:this.$_URL() + `/api/v2/user/${uni.getStorageSync('YongHuXinXi').data.detail.username}/mark/follow/posts`,
					method:'GET',
					header:this.$_Fresns_Header(),
					data:{
						"page":this.BenYe_ChuShiHua_YeMa
					},
					success: (res) => {
						if(res.data.data.list.length){
							this.BenYe_LieBiao = this.BenYe_LieBiao.concat(res.data.data.list)
							this.BenYe_ChuShiHua_YeMa++
							uni.hideLoading();
						}else{
							uni.hideLoading();
							uni.showToast({
								title: "没有数据啦",
								icon: "none",
								duration: 1000
							});
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
// 列表 | 9 | 问答模式
.YR-UI-LieBiao-9{
	.XunHuan{
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid $BianKuangSe;
		padding: 25rpx;
		.Zuo{
			flex-shrink: 0;
			width: 80rpx;
			height: 80rpx;
			overflow: hidden;
			background: $BeiJingSe;
			display: flex;
			flex-flow: column;
			align-items: center;
			justify-content: center;
			view{
				font-size: 22rpx;
				line-height: 22rpx;
				text-align: center;
			}
			view:nth-child(1){
				padding-bottom: 5rpx;
			}
		}
		.Zhong{
			flex-shrink: 0;
			padding: 0 20rpx;
			height: 80rpx;
			overflow: hidden;
			background: #FFF;
			display: flex;
			flex-flow: column;
			align-items: center;
			justify-content: center;
			view{
				font-size: 22rpx;
				line-height: 22rpx;
				text-align: center;
			}
			view:nth-child(1){
				padding-bottom: 5rpx;
			}
		}
		.You{
			flex: 1;
			height: 80rpx;
			display: flex;
			flex-flow: column;
			justify-content:space-between;
			.BiaoTi{
				display: -webkit-box;
				/*!autoprefixer:off*/
				-webkit-box-orient: vertical;
				/*autoprefixer:on*/
				-webkit-line-clamp: 1;
				overflow: hidden;
			}
			.XinXi{
				display: flex;
				align-items: center;
				.YongHu{
					display: flex;
					align-items: center;
					view{
						width: 28rpx;
						height: 28rpx;
						border-radius: 100%;
						overflow: hidden;
						image{
							display: block;
							width: 100%;
							height: auto;
						}
					}
					text{
						padding: 0 0 0 10rpx;
						color: $LanSe;
						font-size: 22rpx;
						line-height: 22rpx;
					}
				}
				.ShiJian{
					padding: 0 0 0 15rpx;
					color: $ZhanWeiSe;
					font-size: 22rpx;
					line-height: 22rpx;
				}
				.LanMu{
					padding: 0 0 0 15rpx;
					color: $ZhanWeiSe;
					font-size: 22rpx;
					line-height: 22rpx;
				}
			}
		}
	}
}
// 一行字 | 1
.YR-UI-YiHangZi-1{
	display: flex;
	align-items: center;
	justify-content: center;
	text{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 80%;
		height: 80rpx;
		background: $BeiJingSe;
		color: $ZhanWeiSe;
		border-radius: 100rpx;
	}
}
// 无数据 | 1
.YR-UI-WuShuJu-1{
	display: flex;
	flex-flow: column;
	justify-content: center;
	.iconfont{
		text-align: center;
		font-size: 80rpx;
		line-height: 80rpx;
		color: $ZhanWeiSe;
	}
	view{
		margin-top: 25rpx;
		color: $ZhanWeiSe;
		text-align: center;
	}
}
// 加载中 | 1 | 全屏
.YR-UI-JiaZaiZhong-1 {
	width: 100%;
	height: 100vh;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1888;
	background: #FFF;
	display: flex;
	align-items: center;
	justify-content: center;

	view {
		width: 70rpx;
		height: 70rpx;
		background: url();
		background-size: 100%;
	}
}
</style>